<template>
  <div class="marriage-details">
    <common-header :title="title"></common-header>
    <template v-if= "showStatus == 'haveData'">
      <div class="page-title">婚姻登记查询结果</div>
      <base-info :info="info"></base-info>
      <explain></explain>
    </template>
    <template v-else-if= "showStatus === 'noData'">
      <empty-data></empty-data>
    </template>
    <div v-else class="loadingContent"></div>
  </div>
</template>

<script>
import { QueryMarriageResult } from "@/api/index";
import { Toast, Empty } from 'vant';
import CommonHeader from '@/common/header/CommonHeader';
import BaseInfo from './components/BaseInfo';
import Explain from './components/Explain';
import EmptyData from './components/EmptyData';

export default {
  name: 'MarriageDetails',
  components: {
    CommonHeader,
    BaseInfo,
    Explain,
    EmptyData
  },
 
  data () {
    return {
      title: "婚姻登记信息",
      info: {},
      showStatus: 'loading', // loading,haveData,noData
    }
  },
  mounted () {
    this.queryMarriageResult();
  },
  methods: {
    queryMarriageResult () {
      const token = localStorage.getItem('token');
      const toast1 = Toast.loading({
        message: '努力加载中...',
        loadingType: 'spinner',
        duration: 0,
      });
      QueryMarriageResult(token).then(res => {
          toast1.clear();
          res = res.data;
          if (res.code) {
            console.log(res.data)
            this.showStatus = 'haveData';
            this.info = res.data.forminfo;
          } else {
            this.showStatus = 'noData';
          }
      });
    },
  }

}
</script>

<style lang="less" scoped>
  @import '~styles/varibles.less';
  .marriage-details {
    background-color: #F1F1F2;
  }
  .page-title {
    line-height: 50px;
    text-align: center;
    font-size: 18px;
    font-weight: 600;
    color: #000;
    background-color:#f8f8f8;
  }
  .loadingContent {
    height: 100vh;
    background-color: inherit;
  }
</style>
